<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<!-- IE 浏览器运行最新的渲染模式-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 启用响应式特性 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 双核使用webkit内核 -->
		<meta name="renderer" content="webkit">
		<title>商旅系统</title>
		<link href="../css/bootstrap.min.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">
		<link href="../css/corptravel.css" rel="stylesheet">
		<link href="../css/enterprise.css" rel="stylesheet">
		<!--<link href="../../../js/icheck/skins/all.css" rel="stylesheet" type="text/css">-->
		<!-- IconFont图标 -->
		<link href="../css/iconfont.css" rel="stylesheet">
		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<!-- 兼容IE8 -->
		<!--[if lte IE 9]>
<script type="text/javascript" src="../../../js/html5shiv.min.js"></script>
<script type="text/javascript" src="../../../js/respond.min.js"></script>
<![endif]-->
		<!-- layer弹框 2.1 -->
		<script type="text/javascript" src="../js/layer/layer.js"></script>
		<!-- 日历控件 -->
		<script language="javascript" type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
	</head>
	<body>
		<!-- header -->
		<nav class="navbar navbar-default navbar-fixed-top bg-white">
			<!-- 小导航 -->
			<nav class="navbar navbar-default" style=" min-height:30px; line-height:30px; margin-bottom:0px; border-radius:0;">
				<div class="container font12">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
						 aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<!-- <span style=" margin-left:-15px; margin-right:20px;">企业商旅管理</span>-->
					</div>
					<ul class="nav navbar-nav nav-top-small userinfo" style="margin-left:-15px;">
						<li class="dropdown"><a href="../user/login.html" class="dropdown-toggle">
								请登录</a>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right nav-top-small">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
								<i class="icon iconfont font14 " style=" vertical-align:middle;">&#xe62b;</i> 028-12345678 <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">（或）028-12345678</a></li>
								<li><a href="#">（或）028-12345678</a></li>
								<!--<li role="separator" class="divider"></li>-->
							</ul>
						</li>

					</ul>
					<ul class="nav navbar-nav navbar-right nav-top-small">
						<li><a href="../帮助中心/help.html">帮助中心</a></li>

					</ul>
				</div>
			</nav>
			<!-- 小导航结束 -->

			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					 aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class=" " href="差旅报告/汇总.html"><img src="../img/logo.png" width="210" height="70" alt="系统LOGO" class="pull-left mar-right-30"
						 style="margin-left:-15px;"></a>
					<!--<h4 class="navbar-brand font24" >成都万里行科技发展有限公司</h4>-->
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="../index.html"><i class="icon iconfont icon-nav-block font24">&#xe620;</i> 在线预订</a></li>
						<li class="active"><a href="../order/orderList.html"><i class="icon iconfont icon-nav-block font24">&#xe61c;</i> 订单管理</a></li>

					</ul>
				</div><!-- /.navbar-collapse -->

			</div>
		</nav>
		<!-- header end -->

		<form id="orderForm">
			<!-- 管理模板 -->
			<div class="container bg-gray-eee box-shadow mar-bottom-30" style="padding-right: 0px; padding-left: 0px; position: relative; margin-top: 120px;">
				<div class="col-sm-7 container bg-white  pad-bottom-20">
					<!-- 航班信息 -->
					<div style="overflow: hidden;">
						<h3 class="mar-bottom-20" style="display: block; float: left;">乘机人</h3>
						<!-- <a href="" style="display: block; float: left; margin-left: 310px; line-height: 70px;">历史乘机人</a> -->
					</div>
					<div class="order">
						<div class="orderbody">
							<input name="flightPeoples[0].realName" type="text" class="form-control input-sm w300" style="display: inline-block;"
							 placeholder="姓名，与登机所持证件中的姓名一致"> <select name="flightPeoples[0].type" class="form-control input-sm w150" style="display: inline-block;">
								<option value="成人" selected="selected">成人</option>
								<option value="儿童">儿童（2-12岁）</option>
								<option value="婴儿">婴儿（14天-2岁）</option>
							</select>
						</div>
						<div class="mar-top-10">
							<select name="" class="form-control input-sm w150" style="display: inline-block;">
								<option value="身份证" selected="selected">身份证</option>
							</select> <input name="flightPeoples[0].idCard" type="text" class="form-control input-sm w300" style="display: inline-block;"
							 placeholder="证件号码">
						</div>

						<div class=" mar-top-10" id="addpeople">
							<input type="button" value="添加乘机人" class="btn btn-danger zw2">
						</div>
					</div>

					<!-- 航班信息 结束 -->

					<!-- 保险 -->
					<div style="position: relative;">
						<h3 class="mar-bottom-20">保险</h3>
						<a href="" class="mar-right-10 safe">航意险</a> <select name="" class="form-control input-sm w150 mar-right-10"
						 style="display: inline-block;">
							<option value="保险" selected="selected">￥30/份X1</option>

						</select> <span>保额￥260万/份</span>

						<!--航意险说明-->
						<div style="width: 460px; border: 1px solid #C4C4C4; padding: 5px; position: absolute; left: 0px; top: 75px; background-color: #eee;"
						 class="explain">
							<h5>航意险说明</h5>
							<p>
								1.保险费：<i class="rmb">¥</i>30/份。保险金额及保险责任：<i class="rmb">¥</i>260万/份。航空意外险由太平财产保险有限公司深圳分公司承保。
							</p>
							<p>2.保险购买即生效，不可单独退保。机票退款后，自动退保。机票改签后，保险责任保护到改签后航班。提供保险定额发票作为报销凭证。</p>
						</div>
					</div>

					<!-- 联系人 -->
					<h3 class="mar-bottom-20">联系人</h3>
					<input name="personName" type="text" class="form-control input-sm" style="display: inline-block; width: 460px;"
					 placeholder="姓名">
					<div class="mar-top-10">
						<select name="select" class="form-control input-sm w110 mar-right-10" style="display: inline-block;">
							<option value="国家" selected="selected">中国&nbsp;&nbsp;+86</option>
						</select> <input name="personPhone" type="text" class="form-control input-sm" style="display: inline-block; width: 337px;"
						 placeholder="手机号码，接收航班信息">
					</div>


					<!-- 报销 -->
					<h3 class="mar-bottom-20">报销</h3>
					<input type="checkbox" name="choice">&nbsp;需要报销凭证<span style="color: #999;">（含：行程单和差额发票，快递费发票）</span>
				</div>

				<!-- 航班信息 -->
				<div class="col-sm-5 bg-gray-eee flightinfo">
				</div>

			</div>


			<div class="text-center mar-top-10">
				<input type="checkbox" name="choice">&nbsp;我已阅读并接受免责条款、费用扣除、退保等在内的重要事项，其中包括
				<a href="">《网络电子客票协议》</a> <a href="">《航意险说明》</a> <a href="">《延误险说明》</a>
				<a href="">《保险经纪委托协议》</a><br /> <input type="button" value="提交订单" class="btn btn-danger mar-top-20" onclick="submitOrder()">
			</div>
		</form>

		<!-- 添加乘机人弹框 -->
		<div id="rev" style="display:none">
			<div class="modal-body">
				<div>
					<input name="input" type="text" class="form-control input-sm w200" style=" display: inline-block;" placeholder="姓名">
					<select name="" class="form-control input-sm w150 persontype" style=" display: inline-block;">
						<option value="成人" selected="selected">成人</option>
						<option value="儿童">儿童（2-12岁）</option>
						<option value="婴儿">婴儿（14天-2岁）</option>
					</select>
				</div>
				<div class="mar-top-10">
					<select name="" class="form-control input-sm w150" style=" display: inline-block;">
						<option value="身份证" selected="selected">身份证</option>
					</select>
					<input name="input" type="text" class="form-control input-sm w200" style=" display: inline-block;" placeholder="证件号码">
				</div>
			</div>

			<div class="modal-footer mar-top-5">
				<button type="button" class="btn btn-primary" onClick="add()">确认添加</button>
				<button type="button" class="btn btn-default" onClick="cancel()">取消</button>
			</div>
		</div>


		<script type="text/javascript">
			$(function() {
				$('.bubbleinfo').each(function() {
					var distance = 10;
					var time = 10;
					var hideDelay = 100;

					var hideDelayTimer = null;

					var beingShown = false;
					var shown = false;
					var trigger = $('.trigger', this);
					var info = $('.popup', this).css('opacity', 0);

					$([trigger.get(0), info.get(0)]).mouseover(function() {
						if (hideDelayTimer)
							clearTimeout(hideDelayTimer);
						if (beingShown || shown) {
							// don't trigger the animation again
							return;
						} else {
							// reset position of info box
							beingShown = true;

							info.css({
								top: 30,
								left: 0,
								display: 'block'
							}).animate({
								top: '-=' + distance + 'px',
								opacity: 1
							}, time, 'swing', function() {
								beingShown = false;
								shown = true;
							});
						}

						return false;
					}).mouseout(function() {
						if (hideDelayTimer)
							clearTimeout(hideDelayTimer);
						hideDelayTimer = setTimeout(function() {
							hideDelayTimer = null;
							info.animate({
								top: '-=' + distance + 'px',
								opacity: 0
							}, time, 'swing', function() {
								shown = false;
								info.css('display', 'none');
							});

						}, hideDelay);

						return false;
					});
				});
			});
		</script>

		<script>
			$(document).ready(function() {

				$('.zw2').on('click', function() { //添加乘机人弹框
					layer.open({
						type: 1,
						title: '添加乘机人',
						area: ['400px', 'auto'],
						fix: false, //不固定
						maxmin: false,
						content: $('#rev'),
					});
				});

			});
		</script>

		<script>
			var peopleNumber = 1;
			$('.explain').hide();
			$('.safe').mouseenter(function() {
				$('.explain').show();
			}).mouseleave(function() {
				$('.explain').hide();
			})

			$(".flightinfo").on("click", ".tuigaiqian", function() {
				$('.instruction').toggle();
			});

			function add() {
				var name = $("#rev .modal-body div input").val();
				var type = $("#rev .modal-body .persontype option:selected").val();
				var idcard = $("#rev .modal-body .mar-top-10 input").val();
				$("#addpeople")
					.before(
						'<div class="orderbody" style="margin-top:30px;"> <input name="flightPeoples[' + peopleNumber +
						'].realName" type="text" class="form-control input-sm w300"' +
						'style="display: inline-block;" placeholder="姓名，与登机所持证件中的姓名一致" value="' + name + '">' +
						'<select name="flightPeoples[' + peopleNumber + '].type" class="form-control input-sm w150"' +
						'style="display: inline-block;">' +
						'<option value="成人">成人</option>' +
						'<option value="儿童">儿童（2-12岁）</option>' +
						'<option value="婴儿">婴儿（14天-2岁）</option></select></div>' +
						'<div class="mar-top-10">' +
						'<select name="" class="form-control input-sm w150"' +
						'style="display: inline-block;">' +
						'<option value="身份证" selected="selected">身份证</option>' +
						'</select> <input name="flightPeoples[' + peopleNumber +
						'].idCard" type="text" class="form-control input-sm w300"' +
						'style="display: inline-block;" placeholder="证件号码" value="' + idcard + '"></div>');
				$("#addpeople").prev().prev().find("option[value='" + type + "']")
					.attr("selected", true);
				layer.closeAll();
				peopleNumber = peopleNumber + 1;
				if (type == "成人") {
					var number = parseInt($(".table tr:nth-child(1) td:last-child span").text())
					$(".table tr:nth-child(1) td:last-child span").text(number + 1);
				} else if (type == "儿童") {
					var number = parseInt($(".table tr:nth-child(2) td:last-child span").text())
					$(".table tr:nth-child(2) td:last-child span").text(number + 1);
				} else if (type == "婴儿") {
					var number = parseInt($(".table tr:nth-child(3) td:last-child span").text())
					$(".table tr:nth-child(3) td:last-child span").text(number + 1);
				}
				$(".table tr:nth-child(4) td:last-child span").text(
					parseInt($(".table tr:nth-child(4) td:last-child span").text()) + 1);
				countPrince();
			}

			function cancel() {
				layer.closeAll();
			}

			function countPrince() {
				var prince = 0;
				prince += parseInt($(".table tr:nth-child(1) td:last-child span").text()) *
					parseInt($(".table tr:nth-child(1) td:nth-child(2) span").text());
				prince += parseInt($(".table tr:nth-child(2) td:last-child span").text()) *
					parseInt($(".table tr:nth-child(2) td:nth-child(2) span").text());
				prince += parseInt($(".table tr:nth-child(3) td:last-child span").text()) *
					parseInt($(".table tr:nth-child(3) td:nth-child(2) span").text());
				prince += parseInt($(".table tr:nth-child(4) td:last-child span").text()) *
					parseInt($(".table tr:nth-child(4) td:nth-child(2) span").text());

				$(".red").text("￥" + prince);
				$("#prince").val(prince);
			}

			$(".order").on("change", ".orderbody select", function() {
				$(".orderbody option:selected").each(function() {
					var adult = 0;
					var child = 0;
					var infant = 0;
					$(".orderbody option:selected").each(function(i, e) {

						if ($(e).val() == "成人") {
							adult += 1;
						} else if ($(e).val() == "儿童") {
							child += 1;
						} else if ($(e).val() == "婴儿") {
							infant += 1;
						}
					});
					$(".table tr:nth-child(1) td:last-child span").text(adult);
					$(".table tr:nth-child(2) td:last-child span").text(child);
					$(".table tr:nth-child(3) td:last-child span").text(infant);
					$(".table tr:nth-child(4) td:last-child span").text((adult + child + infant));

					countPrince();
				})
			})
		</script>

		<script>
			function getQueryVariable(variable) {
				let query = window.location.search.substring(1);
				let vars = query.split("&");
				for (let i = 0; i < vars.length; i++) {
					let pair = vars[i].split("=");
					if (pair[0] == variable) {
						return pair[1];
					}
				}
				return (false);
			}

			function dateFormat(fmt, dateString) {
				var date = new Date(dateString);
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					};
				};
				return fmt;
			}

			//计算时间差
			function timeDifference(date1, date2) {
				var date3 = new Date(date1).getTime() - new Date(date2).getTime(); //时间差的毫秒数    
				//计算出相差天数
				var days = Math.floor(date3 / (24 * 3600 * 1000))

				//计算出小时数
				var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000))
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000))
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000)

				if (days > 0) {
					if (hours > 0) {
						if (minutes > 0) {
							return days + "d" + hours + "h" + minutes + "m";
						} else {
							return days + "d" + hours + "h";
						}
					} else {
						if (minutes > 0) {
							return days + "d" + minutes + "m";
						} else {
							return days + "d";
						}
					}

				} else {
					if (hours > 0) {
						if (minutes > 0) {
							return hours + "h" + minutes + "m";
						} else {
							return hours + "h";
						}
					} else {
						if (minutes > 0) {
							return minutes + "m";
						} else {
							return "";
						}
					}
				}
			}

			$(function() {
				$.ajax({
					url: "../../api/subscribeInfo.action/" + getQueryVariable("flightId") + "/" + getQueryVariable("cabinId"),
					type: "get",
					dataType: "json",
					data: {},
					success: function(data) {
						$(".flightinfo").html("");
						$(".flightinfo").append('<div style="margin-left: -15px;">' +
							'<h4 style="overflow: hidden; margin-left: 10px;">' +
							'<span style="display: block; float: left;">' + dateFormat("mm-dd", data.flight.dayTime) + '&nbsp;&nbsp;' +
							data.weeks +
							'</span> <span style="display: block; float: left; margin-left: 100px;">' + data.flight.departure +
							'-- ' + data.flight.destination + '<input type="hidden" name="departure"' +
							'value="' + data.flight.departure + '"> <input type="hidden"' +
							'name="destination" value="' + data.flight.destination + '">' +
							'</span> <span style="display: block; float: right; color: #999; font-size: 14px; margin-right: 5px;">' +
							data.cabin.shippingSpace +
							'<input type="hidden" name="shippingSpace" value="' + data.cabin.shippingSpace + '">' +
							'<input type="hidden" name="cabinId" value="' + data.cabin.id + '"></span></h4></div>' +
							'<div style="overflow: hidden; margin-bottom: 20px;"><div class="flight-from" style="float: left;">' +
							'<span class="time text-center">' + dateFormat("HH:MM", data.flight.startTime) +
							'<input type="hidden" name="startTime" value="' + data.flight.startTime + '"></span><br />' +
							'<span class="text-center">双流机场</span></div><div class="flight-info" style="float: left; margin-left: 100px;">' +
							'<img src="../img/a.png"> <span class="font12 gray-999">' + timeDifference(data.flight.endTime, data.flight
								.startTime) + '</span>' +
							'<img src="../img/b.png"><br /> <span class="text-center font12 gray-999 mar-left-10">' + data.flight.flightInfo
							.airline +
							'TV6101</span><br /> <img src="../img/c.png" class="mar-left-10">' +
							'<span class="text-center font12 gray-999">实际乘坐' + data.flight.flightInfo.flightNumber +
							'<input type="hidden" name="flightNumber" value="' + data.flight.flightInfo.flightNumber + '"> <input ' +
							'type="hidden" name="airline" value="' + data.flight.flightInfo.airline + '">' +
							'</span><br /> <span class="airline-direct"></span> <span class="arrow"></span></div>' +
							'<div class="flight-to" style="float: right;"><span class="time text-center">' + dateFormat("HH:MM", data.flight
								.endTime) +
							'<input type="hidden" name="endTime" value="' + data.flight.endTime + '"> </span><br />' +
							'<span class="text-center">首都机场</span></div></div><div class="tuigaiqian" style="cursor: pointer; color: #337ab7;">退改签说明</div>' +
							'<div class="instruction"><table class="table table-bordered" style="height: 150px;"><tr><td>成人票</td><td>退票扣费</td><td>改期加收手续费</td>' +
							'<td>签转</td></tr><tr><td>起飞前24小时之前</td><td>￥169/人</td><td>￥368/人</td><td>可以签转</td></tr>' +
							'<tr><td>起飞前24小时之后</td><td>￥338/人</td><td>￥368/人</td><td>可以签转</td></tr></table></div></div>' +
							'<div style="margin-left: -15px; overflow: hidden;"><h4 class="mar-left-10" style="display: block; float: left;">订单总额</h4>' +
							'<h4 class="red" style="display: block; float: right; font-weight: bold;">￥' + (Number(data.cabin.adultPrice) +
								Number(data.cabin.insurancePrice)) +
							'</h4><input type="hidden" id="price" name="price" value="' + (Number(data.cabin.adultPrice) + Number(data
								.cabin.insurancePrice)) +
							'">' +
							'</div><table class="table"><tr><td>成人票</td><td>￥<span>' + data.cabin.adultPrice + '</span>/人</td>' +
							'<td>x<span>1</span></td></tr><tr><td>儿童票</td><td>￥<span>' + data.cabin.childrenPrice + '</span>/人</td>' +
							'<td>x<span>0</span></td></tr><tr><td>婴儿票</td><td>￥<span>' + data.cabin.infantPrice + '</span>/人</td>' +
							'<td>x<span>0</span></td></tr><tr><td>航意险</td><td>￥<span>' + data.cabin.insurancePrice + '</span>/人</td>' +
							'<td>x<span>1</span></td></tr></table><div class="order-discount"></div>');
						$('.instruction').hide();
					},
					error: function(error) {
						console.log(error);
						if(error.status==403){
							window.location.href="../user/login.html";
						}
					}

				});

			});

			function submitOrder() {
				/* 	var formObject = {};
        var formArray =$("#orderForm").serializeArray();
        $.each(formArray,function(i,item){
					  if(item.name=="")
            formObject[item.name] = item.value;
        }); */
				$.ajax({
					url: "../../api/placeOrder.action",
					type: "post",
					data: $("#orderForm").serialize(),
					success: function(data) {
						if(data == "预订失败"){
							layer.msg(data);
						}else{
							window.location.href = "pay.html?orderId=" + data;
						}
					},
					error: function(error) {
						console.log(error);
					}
				});
			}
			
			/* 用户退出 */
			function logout(){
				$.ajax({
					url: "../../api/logout.action",
					type: "get",
					data: {},
					success: function(data) {
						window.location.href="../index.html";
					}
				});
			}

			/* 用户信息 */
			$.ajax({
				url: "../../api/getUserName.action",
				type: "get",
				success: function(data) {
						$(".userinfo").html("");
						$(".userinfo").append(
							'<li class="dropdown"><a href="javascript:;" class="dropdown-toggle"' +
							'data-toggle="dropdown" role="button" aria-haspopup="true" ' +
							'aria-expanded="false">您好，' + data + '<span class="caret"></span></a>' +
							'<ul class="dropdown-menu">' +
							'<li><a href="系统管理/修改密码.html">修改密码</a></li>\n' +
							'<li><a href="javascript:;" onclick="logout()">退出</a></li>' +
							'</ul></li>');
				},
				error: function(error) {
					console.log(error);
					if (error.status == 403) {
						window.location.href = "../user/login.html";
					}
				}
			});
		</script>


	</body>
</html>
